<template>
  <div id="app">
    <div class="head">
      <div class="container">
        <div class="box">
          <a><img src="@/assets/images/logo.jpg" alt="" /></a>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">Home</el-menu-item>
            <el-menu-item index="2">Product Introduction</el-menu-item>
            <el-menu-item index="3">Team Introduction</el-menu-item>
            <el-menu-item index="4">The News</el-menu-item>
            <el-menu-item index="5">Artificial intelligence</el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      if(key==1){
        this.$router.push({
          name:'home'
        },()=>{})
      }
      if(key==2){
        this.$router.push({
          name:'product'
        },()=>{})
      }
      if(key==3){
        this.$router.push({
          name:'team'
        },()=>{})
      }
      if(key==4){
        this.$router.push({
          name:'news'
        },()=>{})
      }
      if(key==5){
        this.$router.push({
          name:'ai'
        },()=>{})
      }
    },
  },
};
</script>
<style>
#app {
  width: 1890px;
}
.head {
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 999;
  background: #fff;
  transition: 0.5s;
  display: flex;
  justify-content: center;
  margin-top: -10px;
}

.el-menu-demo {
  width: 945px;
}
.container {
  width: 1250px;
}
.box {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
}
.box a img {
  float: left;
  margin: 18px 100px 0 00;
  height: 64px;
  transition: 0.5s;
}
.el-menu--horizontal > .el-menu-item.is-active {
  color: #0d86c3 !important;
  font-size: 18px !important;
}
.el-menu--horizontal > .el-menu-item {
  height: 86px !important;
  line-height: 100px !important;
}
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 18px !important;
}
</style>
